<template>
  <div class="Commoditytype-content">
    <div
      style="
        line-height: 40px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
      "
    >
      <h3>商品分类</h3>
      <p>
        <!-- 添加分类部分 -->
        <el-button type="primary" @click="outerVisible = true"
          >添加分类</el-button
        >
      </p>
      <el-dialog title="添加分类" :visible.sync="outerVisible">
        <p style="display: flex">
          分类名称&emsp;<el-input v-model="typename" placeholder="分类名称" />
        </p>
        是否启用&emsp;<el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
        <el-dialog
          width="30%"
          title="添加成功!"
          :visible.sync="innerVisible"
          append-to-body
        >
        </el-dialog>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clickrm">取 消</el-button>
          <el-button type="primary" @click="clickok">确认</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 表格部分 -->
    <div>
      <el-table :data="types">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column width=400 label="分类名称" prop="cateName">
          <template slot-scope="data">
            <!-- 如果本行已经打开了编辑，则显示input框输入 -->
            <el-input style="margin:0;" v-model="data.row.cateName" v-show="data.row.isedit" />
            <!-- 如果没有点击过编辑，则显示文本 -->
            <label v-show="!data.row.isedit">{{ data.row.cateName }}</label>
          </template>
        </el-table-column>
        <el-table-column label="是否启用" prop="">
          <template slot-scope="row"
            ><el-switch
              :disabled="!row.row.isedit"
              v-model="row.row.state"
              active-color="#13ce66"
              inactive-color="#ccc"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="items">
            <!-- slot-scoped是vue的属性，可以得到当前点击行的值.row -->
            <el-button v-show="!items.row.isedit" @click="edclick(items.row)"
              >编辑</el-button
            >
            <el-button
              style="margin: 0"
              v-show="items.row.isedit"
              @click="clickcomplete(items.row)"
              type="success"
              >完成</el-button
            >
            <el-button @click="rmclick(items.row)" type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- @size-change:每页多少条数，
      @current-change:点击第几页数变化时
      :current-page:当前默认显示的页数
      :page-sizes:可以切换每页显示多少条的数组
      :page-size:当前默认显示的条数
      total:数据库的总条数
      layout:控制分页在每个页面的显示顺序，可以删除，可以换位置
       -->
      <el-pagination
        @size-change="sizechange"
        @current-change="pagechange"
        :current-page="curpage"
        :page-sizes="curpagesizes"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { catelist, addcate, delcate, editcate } from "@/apis/items";
export default {
  data() {
    return {
      typename: "", //添加商品时的分类的值
      pagesize: 5, //当前选中条数
      total: 0, //总条数
      curpagesizes: [5, 15, 25, 35],
      curpage: 1, //当前默认显示第几页页数
      outerVisible: false, //添加分类弹框
      innerVisible: false, //添加分类弹框
      outerVisibleone: false, //添加分类弹框
      innerVisibleone: false, //编辑
      value: false, //添加分类开关是否启用的值
      type: "", //添加分类框的值
      types: [], //装表格渲染的数据
      catename: [], //分类数组
    };
  },
  methods: {
    // 点击添加分类时确认键
    clickok() {
      this.innerVisible = true;
      this.outerVisible = true;
      // 发送请求
      addcate({ cateName: this.typename, state: this.value }).then((res) => {
       this.$message({
          message:res.data.msg,
          type: 'success'
        });
       this.getitems();
      });
    },
    // 添加分类时取消键
    clickrm() {
      this.innerVisible = false;
      this.outerVisible = false;
      this.getitems();
    },
    // 封装列表获取函数
    getitems() {
      catelist({ currentPage: this.curpage, pageSize: this.pagesize }).then(
        (res) => {
          if (res.status == 200) {
            for (const obj of res.data.data) {
              obj.state = obj.state == 1;
              obj.isedit = false;//标杆，用于行内编辑显示隐藏使用
            }
            this.types = res.data.data;
            this.total = res.data.total;
          }
        }
      );
    },
    // 点击删除
    rmclick(row) {
      //参数是点击行的数据
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delcate({ id: row.id }).then((res) => {
          if (res.data.code == 0) {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "success",
            });
          }
          this.getitems();
        });
      });
    },
    // 点击编辑打开编辑框
    edclick(row) {
      row.isedit = true; //打开当前本行的编辑
    },

    // 点击完成编辑
    clickcomplete(row) {
      row.isedit = false; //关闭当前本行的编辑
      editcate({
        id: row.id,
        cateName:row.cateName,
        state: row.state,
      }).then((res) => {
        this.$message({
          message: res.data.msg,
          type: "success",
        });
        this.getitems();
      });
    },
    // 确认编辑修改时,
    modifyclick() {},
    // 每页条数发送变化时
    sizechange(newsize) {
      this.pagesize = newsize;
      this.getitems();
    },
    pagechange(newchange) {
      this.curpage = newchange;
      this.getitems();
    },
    open() {
      this.$prompt("", "添加分类", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      });
    },
  },

  created() {
    //初始化数据时调用获取列表接口函数
    this.getitems();
  },
};
</script>

<style lang="less" scoped>
.Commoditytype-content {
  display: flex;
  flex-direction: column;
}
.el-button {
  margin-bottom: 10px;
}
// 弹出框的inout 样式
.el-dialog__body {
  padding: 20px 0 0 40px;
}
.el-input {
  width: 87%;
  margin-bottom: 30px;
}
</style>